<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box">
            <div class="content">
                <div class="content_left">
                    <OfficialForm />
                </div>
                <div class="content_right">
                    <Phone />
                </div>
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <FooterBtn />
        </div>
    </div>
</template>

<script setup lang="ts">
import OfficialForm from './components/OfficialForm.vue';
import Phone from './components/Phone.vue';
import FooterBtn from './components/FooterBtn.vue';
</script>

<style scoped lang="scss">
.content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 24px 0;
    background: #fff;

    .content_left {
        flex: 0.83;
    }

    .content_right {
        width: 400px;
        height: 100%;
        margin-left: 72px;
        display: flex;
        justify-content: center;
    }
}
</style>
